<template>
	<div>
		<div class="forget-passwrod">
			<div class="logo"></div>
			<div class="forget-input">
				<div class="forget-telephone">
					<input type="text" class="forget-telenum"  placeholder="手机号" maxlength="15" v-model="phoneNum" @focus="focueText">
				</div>
				<div class="warn">
					<div class="warm-show" v-show="telephonewram">
						<i class="warn-icon"></i>
						<span>手机号输入有误</span>
					</div>
				</div>
				<div class="forget-code">
					<input type="text" class="forget-telenum" placeholder="短信验证码" maxlength="10" v-model="verifyNum">
					<button class="code-btn" @click="sendMsgCode" v-bind:disabled="disabled" v-bind:class="{sendedmsg:sendmsgbg}">{{sendmsgtext}}</button>
				</div>
				<div class="warn">
					<div class="warm-show" v-show="verifystatus">
						<i class="warn-icon"></i>
						<span>{{msgwramtext}}</span>
					</div>
				</div>
				<div class="forget-setpassword">
					<input :type="keyword" class="forget-password" placeholder="设置新密码" v-model="forgetpasswrod" maxlength="20" @focus="focueText">
					<a class="forget-check-password" :class="{kanmima:yanjing}" @click="changePassWordtype"></a>
				</div>
				<div class="warn">
					<div class="warm-show" v-show="fogetpasswordwram">
						<i class="warn-icon"></i>
						<span>{{warmtext}}</span>
					</div>
				</div>
				<button class="forget-deter" @click="verificationCode">确定</button>
			</div>
		</div>
		<div class="mask-wrapper" v-show="forgetshow">
			<div class="setpassword-prompt">
				<div class="set-success">
					<i class="set-success-icon"></i>
					<span>修改成功</span>
				</div>
				<a class="set-success-know vux-1px-t" @click="forgetKnow">我知道了</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
		    return {
		    	forgetshow:false,
		    	keyword:'password',
		    	yanjing:false,
		    	phoneNum:'',
		    	telephonewram:false,
		    	verifyNum:'', 
		    	disabled:false,
		    	sendmsgbg:false,
		    	sendmsgtext:"获取验证码",
		    	time:0,
		    	verifystatus:false,
		    	forgetpasswrod:'',
		    	fogetpasswordwram:false,
		    	warmtext:'',
		    	msgwramtext:'',
		    	noneedVerify:0,
		    	nationCode:86,
		    	
		    }
		},
		 methods: {
		 	forgetKnow(){
		 		this.forgetshow=false
		 		this.$router.push('/oauth/login')
		 	},
		 	changePassWordtype(){
		 		if(this.keyword==='password'){
		 			this.keyword='tel';
		 			this.yanjing=true;
		 		}else{
		 			this.keyword='password';
		 			this.yanjing=false;
		 		}
		 	},
		 	sendMsgCode(){
			    var reg=11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手机号正则验证
			    if(!this.phoneNum || !reg.test(this.phoneNum)){
			    	this.telephonewram=true;
			    }else{
				    this.time = 60;
				    this.timer();
				    let data = {'mobile':this.phoneNum,'needVerify':this.noneedVerify,'nationCode':this.nationCode};
				    axios.post('/api/oauth/sms/sender/mobile_used',data).then((res)=>{
					    if(res.data.resp_msg.msg_code==400){
					     	this.verifystatus=true;
				    		this.msgwramtext=res.data.resp_msg.msg_error.message;
					    }else{
					     	this.verifystatus=false;
					    }
				    })
			    }
            },
            timer(){
		    	if(this.time>0){
					this.time--;
					this.sendmsgtext = this.time+"s后重新获取";
					this.disabled = true;
					this.sendmsgbg=true;
					var timer = setTimeout(this.timer,1000);
		      	}else if(this.time == 0){
					this.sendmsgtext = "获取验证码";
					this.sendmsgbg=false;
					clearTimeout(timer);
					this.disabled = false;
		        }
		    },
		    verificationCode(){
				let data = {'mobile':this.phoneNum,'code':this.verifyNum,'password':this.forgetpasswrod};
			    axios.put('/api/oauth/password',data).then((res)=>{
			     if(res.data.resp_msg.msg_code==400){
			     	this.fogetpasswordwram=true;
		    		this.warmtext=res.data.resp_msg.msg_error.message;
			     }else{
			     	this.forgetshow=true;
			     }
			    });
			},
		 	focueText(){
		 		this.telephonewram=false;
		 		this.fogetpasswordwram=false;
		 	}
		},
		mounted() {
			
		}
	}
</script>

<style>
@import url("../../styles/common/oauth/oauth-common.css");
.forget-passwrod{}
.forget-passwrod .logo{width:130px;height:83px;margin:30px auto;background: url(../../static/oauth-img/logo.png) no-repeat;background-size:130px 83px;}
.forget-input{padding:0 12px;}
.forget-telephone{height: 30px;border:1px solid #eee;border-radius:3px;padding: 7px 15px;background: #f9f9f9;}
.forget-telephone .forget-telenum{width: 100%;height: 30px; line-height: 30px;color: #888;}
.forget-code{display: flex;height:44px;background: #f9f9f9;border:1px solid #eee;border-radius:3px;}
.forget-code .forget-telenum{display: inline-block;flex:1;height: 30px;line-height: 30px;color: #888;padding:7px 15px;}
.forget-code .code-btn{display: inline-block;flex:0 0 110px;width:110px;height:43px;line-height:43px;text-align: center;color: #fff;font-size: 14px;background: #1e87e6;border-radius:3px;margin-left:5px;}
.forget-setpassword{height: 30px;border:1px solid #eee;border-radius:3px;padding: 7px 15px;display: flex;background: #f9f9f9;}
.forget-setpassword .forget-password{flex: 1;line-height:30px;}
.forget-check-password{display: inline-block;flex:0 0 24px;margin-left:20px;background: url(../../static/oauth-img/password-on.png) no-repeat;
background-size:20px 20px;vertical-align: top;margin-top:3px;}
.forget-deter{width:100%;height: 44px;line-height: 44px;text-align: center;font-size: 16px;color: #fff;background: #1e87e6;border-radius:3px;}
.mask-wrapper{position:fixed;width: 100%;height:100%;top: 0;left: 0;bottom:0;background: rgba(7,17,27,0.7);z-index:1000;}
.setpassword-prompt{margin: 200px auto 0 auto;width: 75%;height:140px;background: #fff;border-radius:5px;}
.setpassword-prompt .set-success{padding:15px 0;height: 70px;text-align: center;}
.set-success-icon{display:block;margin:0 auto;width:42px;height:42px;background: url(../../static/oauth-img/gou.png) no-repeat;background-size:42px 42px;}
.setpassword-prompt .set-success span{display:block;line-height: 30px;font-size: 14px;color: #1c1c1c;margin-top: 5px;}
.setpassword-prompt .set-success-know{display:inline-block;width:100%;height:38px;line-height: 38px;text-align: center;font-size: 14px;color: #1e87e6;}
.sendedmsg{background: #fff !important;color:#008CF0 !important;border-left:1px solid #eee;}
</style>